<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增强版图灵机模拟器</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div class="container">
    <h1>增强版图灵机模拟器</h1>
    
    <div class="panel">
        <h3 class="panel-title">纸带可视化</h3>
        <canvas id="tapeCanvas" width="1100" height="120"></canvas>
    </div>
    
    <div class="panel">
        <h3 class="panel-title">状态信息</h3>
        <div class="state-info">
            <div class="info-item">
                <div class="info-label">当前状态</div>
                <div id="currentState">未启动</div>
            </div>
            <div class="info-item">
                <div class="info-label">当前符号</div>
                <div id="currentSymbol">-</div>
            </div>
            <div class="info-item">
                <div class="info-label">读写头位置</div>
                <div id="headPosition">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">步骤计数</div>
                <div id="stepCount">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">字节大小</div>
                <div id="byteSize">1 字节</div>
            </div>
            <div class="info-item">
                <div class="info-label">缓存大小</div>
                <div id="cacheSize">0 字节</div>
            </div>
        </div>
    </div>
    
    <div class="panel">
        <h3 class="panel-title">控制面板</h3>
        <div class="controls">
            <button id="startBtn">开始执行</button>
            <button id="pauseBtn">暂停</button>
            <button id="stepBtn">单步执行</button>
            <button id="resetBtn">重置</button>
            <button id="haltBtn">停机</button>
            
            <div class="speed-control">
                <label for="speedSlider">速度:</label>
                <input type="range" id="speedSlider" min="1" max="10" value="5">
                <span id="speedValue">中速</span>
            </div>
            
            <select id="dataType">
                <option value="hex">十六进制 (0-F)</option>
            </select>
            
            <input type="number" id="byteSizeInput" min="1" max="8" value="1" style="width: 60px;">
            <label for="byteSizeInput">字节</label>
        </div>
        
        <div class="controls">
            <button id="moveLeftBtn">左移</button>
            <button id="moveRightBtn">右移</button>
            <input type="number" id="moveSteps" value="1" min="1" style="width: 50px;">
            <label for="moveSteps">步</label>
            
            <button id="loadToCacheBtn">读取到缓存</button>
            <input type="number" id="loadPosition" value="0" style="width: 60px;">
            <label for="loadPosition">位置</label>
            <input type="number" id="loadLength" value="1" min="1" style="width: 50px;">
            <label for="loadLength">字节</label>
            
            <button id="writeFromCacheBtn">写入到纸带</button>
            <input type="number" id="writePosition" value="0" style="width: 60px;">
            <label for="writePosition">位置</label>
        </div>
    </div>
    
    <div class="panel">
        <div class="tab-container">
            <div class="tab " data-tab="cache">缓存</div>
            <div class="tab" data-tab="command">命令输入</div>
            <div class="tab" data-tab="history">执行历史</div>
            <div class="tab active" data-tab="assembly">汇编层</div>
            <div class="tab" data-tab="highlevel">高级语言层</div>
        </div>
        
        <div id="cacheTab" class="tab-content">
            <h4>缓存内容</h4>
            <div class="memory-view" id="cacheView">缓存为空</div>
            
            <h4>缓存操作</h4>
            <div class="controls">
                <button id="clearCacheBtn">清空缓存</button>
                <button id="editCacheBtn">编辑缓存</button>
            </div>
        </div>
        
        <div id="commandTab" class="tab-content">
            <h4>图灵机命令</h4>
            <p>格式: [当前状态, 读取值, 写入值, 移动方向(L/R/S), 下一状态]</p>
            <textarea id="commandInput" placeholder="例如: ['q0', '0', '1', 'R', 'q1']"></textarea>
            <div class="controls">
                <button id="executeCommandBtn">执行命令</button>
                <button id="addInstructionBtn">添加到指令集</button>
            </div>
        </div>
        
        <div id="historyTab" class="tab-content">
            <h4>执行历史</h4>
            <div class="command-history" id="commandHistory"></div>
            <div class="controls">
                <button id="clearHistoryBtn">清空历史</button>
            </div>
        </div>
        
        <div id="assemblyTab" class="tab-content active">
            <h4>汇编层</h4>
            <p>简单汇编指令示例:</p>
            <ul>
                <li>LOAD addr - 从纸带地址加载数据到缓存</li>
                <li>STORE addr - 将缓存数据存储到纸带地址</li>
                <li>MOV left/right steps - 移动读写头</li>
                <li>ADD/SUB/MUL/DIV - 算术运算</li>
                <li>CMP - 比较操作</li>
                <li>JMP/JZ/JNZ - 跳转指令</li>
            </ul>
            <textarea id="assemblyInput" placeholder="输入汇编指令，每行一条" value="">set ad 45
load 45
store 38
              </textarea>
            <div class="controls">
                <button id="runAssemblyBtn">运行汇编</button>
                <button id="compileAssemblyBtn">编译为图灵机指令</button>
            </div>
        </div>
        
        <div id="highlevelTab" class="tab-content">
            <h4>高级语言层</h4>
            <p>简单高级语言示例:</p>
            <pre>
// 二进制加1程序
function incrementBinary() {
// 向右移动直到空白
while (read() !== ' ') {
    move('right');
}
move('left');

// 向左移动并加1
while (true) {
    let bit = read();
    if (bit === '1') {
        write('0');
        move('left');
    } else if (bit === '0' || bit === ' ') {
        write('1');
        halt();
        break;
    }
}
}</pre>
            <textarea id="highlevelInput" placeholder="输入高级语言代码"></textarea>
            <div class="controls">
                <button id="runHighLevelBtn">运行</button>
                <button id="compileHighLevelBtn">编译为汇编</button>
            </div>
        </div>
    </div>
    
    <div class="panel">
        <h3 class="panel-title">数据输入</h3>
        <div class="controls">
            <input type="text" id="inputData" placeholder="输入数据" style="flex-grow: 1;">
            <input type="number" id="inputPosition" value="0" min="0" style="width: 80px;">
            <label for="inputPosition">起始位置</label>
            <button id="writeDataBtn">写入纸带</button>
        </div>
        <div class="memory-view" id="tapeView">纸带内容将显示在这里</div>
    </div>
</div>


    <script src="js/constants.js" type="module"></script>
    <script src="js/storage.js" type="module"></script>
    <script src="js/turingMachine.js" type="module"></script>
    <script src="js/assembler.js" type="module"></script>
    <script src="js/ui.js" type="module"></script>
    <script src="js/app.js" type="module"></script>
</body>
</html>